<template>
  <div class="app-container">
    <div class="form-box">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane label="基础信息" class="form-tabs-tab-pane">
            <!-- 姓名/昵称 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.name_ext')" prop="name">
                  <el-input
                    v-model="form.name"
                    :placeholder="$t('common.name_ext_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 用户名 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.username')" prop="username">
                  <el-input
                    v-model="form.username"
                    :placeholder="$t('common.username_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 密码 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.password')" prop="password">
                  <el-input
                    v-model="form.password"
                    :placeholder="$t('common.password_tips')"
                    type="password"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 确认密码 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.repassword')" prop="repassword">
                  <el-input
                    v-model="form.repassword"
                    :placeholder="$t('common.repassword_tips')"
                    type="password"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 角色 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item :label="$t('common.user_role')" prop="role_ids">
                  <el-checkbox-group v-model="form.role_ids">
                    <el-checkbox label="编辑" value="1" />
                    <el-checkbox label="普通管理员" value="2" />
                    <el-checkbox label="高级管理员" value="3" />
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 头像 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('user.avatar_image')"
                  prop="avatar_image"
                >
                  <jsp-image-upload
                    :default-list="avatar_imageList"
                    @success="handlePhotoImageUploadSuccss"
                    @change="handlePhotoImageUploadChange"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 介绍 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('user.description')"
                  prop="description"
                >
                  <el-input
                    v-model="form.description"
                    type="textarea"
                    :placeholder="$t('user.description_tips')"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 发布状态 -->
            <el-row :gutter="20" type="flex" justify="center">
              <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                <el-form-item
                  :label="$t('common.status')"
                  prop="status"
                >
                  <el-select
                    v-model="form.status"
                    :placeholder="$t('common.status_tips')"
                    clearable
                  >
                    <el-option label="已发布" value="1" />
                    <el-option label="未发布" value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>

        <el-row :gutter="20" type="flex" justify="center" class="btn-row">
          <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{ $t('common.submit') }}</el-button>
              <el-button @click="resetForm">{{ $t('common.reset') }}</el-button>
              <el-button @click="onCancel">{{ $t('common.cancel') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspImageUpload from '@/components/JspImageUpload'

// export
export default {
  name: 'UserEdit',
  components: {
    JspImageUpload
  },
  data() {
    return {
      form: {
        id: 0,
        name: '',
        username: '',
        password: '',
        role_ids: [],
        avatar_image: '2', // 数字之间逗号隔开
        description: '',
        status: ''
      },
      // 封面图列表: 请求附件接口
      avatar_imageList: [
        {
          id: 2,
          name: 'food.jpeg',
          url: 'http://pic.baike.soso.com/p/20130402/20130402143317-1824467319.jpg',
          path: '/uploads/101.jpg'
        }
      ],
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        username: [{ required: true, message: '请填写用户名', trigger: 'blur' }]
      },
      // 路由参数
      routerParams: {}
    }
  },
  computed: {},
  created() {
    this.routerParams = this.$route.params
    this.getDetail()
  },
  methods: {
    /** *********************************************** 表单相关 开始 ******************************************************/

    // 内容详情
    async getDetail() {
      if (this.id > 0) {
        // 请求内容接口：数据不存在报异常则关闭当前标签返回上一页
        // 请求附件接口
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 请求接口
          console.log(this.form)
          this.$message.success('提交!')
        } else {
          this.$message.error('提交失败!')
          return false
        }
      })
    },
    // 取消/返回
    onCancel() {
      // 删除当前页标签并返回上一页
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
      // this.$message.info('已取消！')
    },
    // 表单重置
    resetForm() {
      this.$refs['form'].resetFields()
    },
    /** ******************************************* 封面图上传 开始 **************************************************/
    handlePhotoImageUploadSuccss(response, file, fileList) {
      console.log('上传成功事件', response, file, fileList)
      // 判断response是否上传成功
      this.$message.success('上传成功')
    },
    handlePhotoImageUploadChange(result) {
      console.log('改变事件', result)
      this.avatar_image = this.ids
    }
    /** ******************************************* 封面图上传 结束 **************************************************/
  }
}
</script>

<style scoped lang="scss">
</style>
